<template>
  <div class="main">
    <div :class="['nav-menu', showMenu ? '' : 'nav-menu-narrow']">
      <div class="icon">
        <img v-if="showMenu" class="show-img" src="../assets/public/logo_menu.png">
        <img v-if="!showMenu" class="hide-img" src="../assets/public/hide_logo.png">
      </div>
      <Menu ref="menu" accordion class="menu" v-if="showMenu" :active-name="activeName" :open-names="openNames">
        <template v-for="(item) in menu">
          <!-- 展开并且有子菜单 -->
          <Submenu v-if="showMenu && item.children && item.children.length" :key="item.menuId" :name="item.name">
            <template slot="title">
              <Icon v-if="item.icon && item.icon.indexOf('iconfont') === -1" :type="item.icon || ''" size="24" />
              <Icon v-if="item.icon && item.icon.indexOf('iconfont') !== -1" :custom="item.icon || ''" size="24" />
              <span>{{ item.name }}</span>
            </template>
            <template v-for="(children) in item.children">
              <MenuItem v-if="children.hidden === 0" :key="children.menuId" :name="children.name" :to="children.url"
                :target="children.open === 0 ? '_self' : '_blank'">
              {{ children.name }}
              </MenuItem>
            </template>
          </Submenu>

          <!-- 展开但没有子菜单 -->
          <MenuItem v-else-if="showMenu && item.hidden === 0" :name="item.name" :to="item.url" :key="item.menuId"
            :target="item.open === 0 ? '_self' : '_blank'">
          <Icon v-if="item.icon && item.icon.indexOf('iconfont') === -1" :type="item.icon || ''" size="24" />
          <Icon v-if="item.icon && item.icon.indexOf('iconfont') !== -1" :custom="item.icon || ''" size="24" />
          <span>{{ item.name }}</span>
          </MenuItem>
        </template>
      </Menu>

      <Menu accordion class="menu-narrow" v-if="!showMenu">
        <template v-for="(item) in menu">
          <!-- 不展开有子菜单 -->
          <Dropdown transfer v-if="!showMenu && item.children && item.children.length" :key="item.menuId"
            placement="right-start">
            <div class="nav-narrow">
              <Icon v-if="item.icon && item.icon.indexOf('iconfont') === -1" :type="item.icon || ''" size="24" />
              <Icon v-if="item.icon && item.icon.indexOf('iconfont') !== -1" :custom="item.icon || ''" size="24" />
            </div>

            <DropdownMenu slot="list">
              <template v-for="(children) in item.children">
                <DropdownItem v-if="children.hidden === 0" :key="children.menuId">
                  <MenuItem class="narrow-dropdown-item" :name="children.name" :to="children.url"
                    :target="children.open === 0 ? '_self' : '_blank'">
                  {{ children.name }}
                  </MenuItem>
                </DropdownItem>
              </template>
            </DropdownMenu>
          </Dropdown>

          <!-- 不展开无子菜单 -->
          <Tooltip transfer v-else-if="!showMenu && item.hidden === 0" :content="item.name" placement="right"
            :key="item.menuId">
            <div class="nav-narrow">
              <MenuItem :name="item.name" :to="item.url" :target="item.open === 0 ? '_self' : '_blank'">
              <Icon v-if="item.icon && item.icon.indexOf('iconfont') === -1" :type="item.icon || ''" size="24" />
              <Icon v-if="item.icon && item.icon.indexOf('iconfont') !== -1" :custom="item.icon || ''" size="24" />
              </MenuItem>
            </div>
          </Tooltip>
        </template>
      </Menu>
    </div>

    <div class="nav_content">
      <div class="nav_header">
        <div class="nav-left">
          <img :class="[showMenu ? 'show_menu' : '']" src="../assets/public/show_menu.png" @click="showMenu = !showMenu" />
          <div class="nav-list">
            <!--            <div>欢迎页</div>-->
          </div>
        </div>
        <div class="nav_right">
          <div class="time">
            <span class="date">{{ date }}</span>
            <span class="hours">{{ time }}</span>
          </div>
          <div class="line"></div>
          <div class="right">
            <div class="right_top">
              <Dropdown class="exit" @on-click="handleTopUserClick" placement="top-end">
                <Icon type="ios-contact" color="#fff" size="36" style="margin-right: 12px" />
                <div class="main-user-name">
                  <div>欢迎您，{{ userName }}</div>
                </div>
                <Icon :size="24" type="md-arrow-dropdown"></Icon>
                <DropdownMenu slot="list">
                  <DropdownItem name="editPassword">修改密码</DropdownItem>
                  <DropdownItem name="logout">退出系统</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </div>
          </div>
        </div>
      </div>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>

    <AddOrEditModal v-model="modalCTL.show" :title="modalCTL.title" :loading="modalCTL.loading" @on-ok="editPassword">
      <Form ref="form" :model="formValidate" :rules="ruleValidate" label-position="top" slot="content">
        <FormItem label="原密码" prop="password">
          <Input type="password" v-model="formValidate.password" placeholder="" />
        </FormItem>
        <FormItem label="新密码" prop="newPassword">
          <Input type="password" v-model="formValidate.newPassword" placeholder="" />
        </FormItem>
        <FormItem label="确认密码" prop="confirmPassword">
          <Input type="password" v-model="formValidate.confirmPassword" placeholder="" />
        </FormItem>
      </Form>
    </AddOrEditModal>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    let self = this;
    return {
      formValidate: {
        password: '',
        newPassword: '',
        confirmPassword: '',
      },
      ruleValidate: {
        password: [{ required: true, message: "原密码不能为空", trigger: "change" }],
        newPassword: [{ required: true, message: "新密码不能为空", trigger: "change" }],
        confirmPassword: [{
          required: true, validator: (rule, value, callback) => {
            if (self.formValidate.newPassword !== value) {
              callback(new Error("输入的密码不一致"));
            } else {
              callback();
            }
          }, trigger: "change"
        }],
      },
      activeName: '',
      openNames: [],
      showMenu: true,
      userName: this.$storage.getItem(this.$storage.key.user_key)?.username,
      date: '',
      time: '',
      modalCTL: {
        show: false,
        loading: true,
        title: "修改密码"
      },
    };
  },

  watch: {
    // 监听路由改变
    $route: {
      handler(to) {
        this.getActiveName(to.path, this.menu, undefined);
      },
      immediate: true
    },
    // 监听open
    openNames() {
      if (this.showMenu) {
        this.$nextTick(() => {
          this.$refs.menu.updateOpened();
          this.$refs.menu.updateActiveName();
        });
      }
    },
    // 改变隐藏状态后，要手动更新导航状态
    showMenu(value) {
      if (value) {
        this.$nextTick(() => {
          this.$refs.menu.updateOpened();
          this.$refs.menu.updateActiveName();
        });
      }
    },
  },

  mounted() {
    setInterval(() => {
      this.date = this.$utils.date.formatDate("yyyy-MM-dd", new Date());
      this.time = this.$utils.date.formatDate("hh:mm:ss", new Date());
    }, 1000);
  },

  computed: {
    // 监听store中menu的变化
    menu() {
      return this.$store.state.menu;
    },
  },

  methods: {
    /**
     * 根据跳转的路径获取当前活动的路由
     */
    getActiveName(path, list, name) {
      for (let i = 0; i < list.length; i++) {
        // 判断路径是否匹配
        if (list[i].url === path) {
          this.$nextTick(() => {
            if (name) {
              this.openNames = [name];
            } else {
              this.openNames = [list[i].name];
            }
            this.activeName = list[i].name;
          });
          break;
        }

        // 没有匹配到，开始递归
        if (list[i].children && list[i].children.length > 0) {
          this.getActiveName(path, list[i].children, list[i].name);
        }
      }
    },

    // 点击用户操作
    handleTopUserClick(name) {
      switch (name) {
        case "logout":
          this.toExit();
          break;
        case "editPassword":
          this.modalCTL.show = true;
          break;
      }
    },

    // 修改密码
    editPassword() {
      // 校验数据
      this.$refs.form.validate(state => {
        if (!state) {
          this.modalCTL.loading = false;
          this.$nextTick(() => {
            this.modalCTL.loading = true;
          });
          return this.$Message.warning("请填写对应的值");
        }
        // 修改密码
        this.$api.post('sp/sys/user/password', {}, {
          params: {
            password: this.$utils.util.rsaEncrypt(this.formValidate.password),
            newPassword: this.$utils.util.rsaEncrypt(this.formValidate.newPassword)
          }
        }).then((res) => {
          if (res.data.code === 0) {
            this.$Message.success("修改密码成功");
            this.toExit();
          }
        }).finally(() => this.modalCTL.show = false);
      });
    },

    // 退出系统
    toExit() {
      this.$storage.clear();
      // 重置vuex
      this.$store.dispatch("resetState");
      this.$router.push({ name: "Login" });
    },
  }
};
</script>

<style lang="less">
@import "../styles/public";

.main {
  display: flex;
  flex: 1;
  overflow: hidden;

  /* 导航 */
  .nav-menu {
    /* 导航宽度 */
    width: @nav-width - 2px;
    display: flex;
    height: 100vh;
    flex-direction: column;
    transition: width .3s ease-in-out;
    overflow: hidden;

    .icon {
      display: flex;
      flex: 1;
      max-height: @menu-header-height;
      background-color: @menu-header-bg;
      justify-content: center;
      align-items: center;

      .show-img {
        width: 272px;
        height: 78px;
      }

      .hide-img {
        width: 78px;
        height: 78px;
      }
    }

    .menu {
      flex: 1;
      overflow-y: auto;
      width: @nav-width !important;
      background: @menu-bg;
      flex-direction: column;
      display: flex;
    }

    .menu-narrow {
      flex: 1;
      width: 100% !important;
      background: @menu-bg;
      flex-direction: column;
      display: flex;
    }
  }

  /* 导航收缩后的宽度 */
  .nav-menu-narrow {
    width: 100px !important;
    transition: width .3s ease-in-out;

    .nav-narrow {
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 65px;
      cursor: pointer;
      color: white;
    }

    /* 简易导航悬浮颜色 */
    .nav-narrow:hover {
      color: @active-color;
    }
  }

  /* 主内容 */
  .nav_content {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;

    /* 头部导航 */
    .nav_header {
      display: flex;
      flex: 1;
      max-height: 100px;
      background-color: @header-bg;
      align-items: center;
      justify-content: space-between;

      // 头部左侧导航
      .nav-left {
        display: flex;
        align-items: center;

        >img {
          width: 24px;
          height: 24px;
          margin-left: 20px;
          transform: rotate(180deg);
          transition: transform .3s ease-in-out;
          cursor: pointer;
        }

        .show_menu {
          transform: rotate(0deg);
          transition: transform .3s ease-in-out;
        }

        .nav-list {
          display: flex;
          color: white;

          div {
            padding: 0 30px 0 15px;
            border-right: 1px solid white;
            cursor: pointer;
            font-size: 18px;
            line-height: 18px;
          }

          div:last-child {
            border-right: none;
          }
        }
      }

      // 头部右侧导航
      .nav_right {
        width: 500px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        >.time {
          color: white;
          font-family: Roboto, Roboto-Regular;
          font-weight: 400;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100px;
          width: 105px;

          >.date {
            font-size: 16px;
          }

          >.hours {
            font-size: 26px;
          }
        }

        >.line {
          width: 1px;
          height: 70px;
          background-color: white;
          margin: 0 30px;
        }

        >.right {
          display: flex;
          height: 100px;
          margin-right: 24px;
          justify-content: center;
          flex-direction: column;
          color: white;
          overflow: hidden;

          >.right_top {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            cursor: pointer;
            font-size: 14px;

            >.exit {
              .main-user-name {
                display: flex;
                flex: 1;
                overflow: hidden;
                max-width: 195px;

                >div {
                  overflow: hidden;
                  text-overflow: ellipsis; //溢出用省略号显示
                  white-space: nowrap; //溢出不换行
                  text-align-last: justify;
                }
              }

              .ivu-dropdown-rel {
                display: flex;
                align-items: center;
              }

              .ivu-select-dropdown {
                padding: 0;
                margin: 0;
                width: 106px;
                overflow: hidden;
                border: 1px solid #4a9bff;
                border-radius: 6px;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
                margin-right: 5px;
                margin-top: -5px;
              }

              .ivu-dropdown-item {
                text-align: center;
                height: 40px;
                padding: 0;
                line-height: 40px;
                font-weight: 400;
                color: #333333;
              }

              .ivu-dropdown-item:hover {
                color: #107bff;
              }
            }
          }

          >.right_bottom {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .ivu-select-arrow {
              color: white;
            }

            >.ivu-select-single .ivu-select-selection {
              height: 24px;
              background: rgba(255, 255, 255, 0.20);
              border-radius: 4px;
              border: none;
            }

            >.ivu-select-single .ivu-select-selection .ivu-select-placeholder,
            .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
              height: 24px;
              line-height: 24px;
              color: white;
            }
          }
        }
      }
    }
  }
}

/* 导航缩小后的显示 */
.nav-menu-narrow .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
  background: @active-bg;
  color: @active-color;
}

.nav-menu-narrow .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
  width: 0;
}

/* iview导航自定义 */
.ivu-menu-vertical.ivu-menu-light:after {
  width: 0 !important;
}

.menu.ivu-menu-light.ivu-menu-vertical .ivu-menu-opened {
  background: @active-bg;
}

.menu.ivu-menu-light.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title {
  background: @active-bg;
}

.menu.ivu-menu-light.ivu-menu-vertical .ivu-menu-item,
.ivu-menu-light.ivu-menu-vertical .ivu-menu-submenu-title {
  font-size: @menu-font-size;
  font-weight: 400;
  color: @not-active-color;
  padding: 20px 24px;
}

.menu.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu),
.ivu-menu-light.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
  font-size: 14px;
  font-weight: 400;
  color: @active-color;
}

.menu.ivu-menu-light.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active,
.ivu-menu-light.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
  background: @active-bg;
}

.menu.ivu-menu-light.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item:hover {
  color: @active-color;
}

.menu.ivu-menu-light.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active,
.ivu-menu-light.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
  background: @active-bg !important;
}

.menu.ivu-menu-light.ivu-menu-vertical .ivu-menu-child-item-active>.ivu-menu-submenu-title {
  font-size: @menu-font-size;
  font-weight: 700;
  color: @active-color;
}

.menu.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active .ivu-menu {
  border-top: 1px solid rgba(255, 255, 255, 0.30);
}

.menu.ivu-menu-item-active .ivu-menu-item,
.ivu-menu-submenu .ivu-menu-item {
  font-size: 14px !important;
}

.ivu-menu-submenu>.ivu-menu .ivu-menu-item::before {
  content: '';
  display: inline-block;
  top: 50%;
  bottom: 50%;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  margin-right: 8px;
  border-radius: 5px;
  background: currentColor;
  margin-left: 14px;
}

.menu.ivu-menu li:hover {
  color: @active-color !important;
  background: @active-bg !important;
}

.menu.ivu-menu a:hover {
  color: @active-color !important;
  background: @active-bg !important;
}

.nav-narrow a:hover {
  color: @active-color !important;
}

.menu.ivu-menu li .ivu-menu-submenu-title:hover {
  color: @active-color !important;
  background: @active-bg !important;
}

.menu.ivu-menu a .ivu-menu-submenu-title:hover {
  color: @active-color !important;
  background: @active-bg !important;
}

.menu.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu),
.ivu-menu-light.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu),
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):hover,
.ivu-menu-light.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover {
  font-size: @menu-font-size;
  font-weight: 700;
  background: @active-bg !important;
}

.narrow-dropdown-item {
  padding: 3px 0;
}</style>